<template>
  <div>
    <button @click="destroy">子组件卸载指令</button>
  </div>
</template>
  
<script>
export default {
  name: "Header",
  methods: {
    destroy() {
      this.$destroy();
    },
  },
  /* 
  父子组件生命周期流程:
    - 初始化流程
      父组件的beforeCreate --> 父组件的created --> 父组件的beforeMount
      -->子组件的beforeCreate --> 子组件的created --> 子组件的beforeMount
      -->子组件的mounted-->父组件mounted

    - 更新流程
      - 当子组件没有用到父组件数据的时候(不仅限于props),父组件更新,子组件不会触发任何的更新
      - 当子组件用到了父组件的数据时 父组件beforeUpdate-->子组件beforeUpdate-->子组件updated-->父组件updated

    - 卸载流程
      - 父组件beforeDestroy-->子组件beforeDestroy-->子组件destroyed-->父组件destroyed
*/
  beforeCreate() {
    console.log("子组件beforeCreate");
  },
  created() {
    console.log("子组件created");
  },
  beforeMount() {
    console.log("子组件beforeMount");
  },
  mounted() {
    console.log("子组件mounted");
  },
  beforeUpdate() {
    console.log("子组件beforeUpdate");
  },
  updated() {
    console.log("子组件updated");
  },
  beforeDestroy() {
    console.log("子组件beforeDestroy");
  },
  destroyed() {
    console.log("子组件destroyed");
  },
};
</script>

<style></style>
